﻿@{
    Layout = "~/Areas/en/Views/Shared/_LayoutPage1.cshtml";
}

<div class="row" ng-controller="areaController" ng-init="getAreas();">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>Area <small>List of Area</small></h2>
                <a href="newarea" class="btn btn-dark btn-sm alignright">Add New Area</a>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="alert alert-info" style="display:none"></div>
                <br />
                <div class="datatable" style="display:none">
                    <table id="datatable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Area</th>
                                <th>Area Type</th>
                                <th style="width:90px">Map</th>
                                <th>Active</th>
                                <th style="width:50px">Action</th>
                            </tr>
                        </thead>


                        <tbody>
                            <tr ng-repeat="area in areas">
                                <td>{{ area.AREA }}</td>
                                <td>{{ area.AREATYPE }}</td>
                                <td ><a class="btn btn-dark btn-xs" ng-hide="area.MAP==''" href="javascript:void(0)" ng-click="viewMap(area.AREA,area.MAP)"><i class="fa fa-map" aria-hidden="true"></i> View Map</a></td>
                                <td>{{ area.ACTIVE }}</td>
                                <td>
                                    <a href="~/en/area/editarea/#/?id={{area.ID}}" class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i> Edit</a>
                                </td>

                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

    <div id="mapModal" class="modal container fade" tabindex="-1">
        <div class="modal-header" >
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title " >MAP</h4>
        </div>
        <div class="modal-body " style=" text-align:center;  " id="modal-body">
            <img style="clear:both;float:none;max-height: 100%;max-width:100%;margin: auto" src="" id="map" />
            <hr />
            <div class="row">
                
                <div class=" col-md-12 text-right">
                  
                    <button type="button" class="btn btn-default" onclick="$('#mapModal').modal('hide')">
                        Close 
                    </button>

                </div>
            </div>
        </div>
    </div>

